<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import service from "@/utils/request.ts";
defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Setting"
})
const activeTab = ref('site')
const siteSettings = ref<{
  id: string,
  keyName: string,
  settingValue: string,
  info: string
}[]>([])
const paramsList = ref<{
  key: string,
  value: string,
  remark: string,
}[]>([])

const queryWebsiteInfo = () => {
  service.request({
    url: "/api/sys/website/query",
    method: "get",
    params: null,
    data: null
  }).then((res) => {
    console.log(res)
    siteSettings.value = res.data
  }).finally(() => {
  })
}

const queryParams = () => {
  service.request({
    url: "/api/sys/params/query",
    method: "get",
    params: null,
    data: null
  }).then((res) => {
    console.log(res)
    paramsList.value = res.data
  }).finally(() => {
  })
}

onMounted(() => {
  queryWebsiteInfo()
  queryParams()
})
const saveSettings = () => {
  service.request({
    url: "/api/sys/website/syncBatch",
    method: "post",
    params: null,
    data: siteSettings.value.map((item) => {
      return {
        keyName: item.keyName,
        settingValue: item.settingValue,
      }
    })
  }).then((res) => {
    console.log(res)
    queryWebsiteInfo()
    ElMessage({
      type: 'success',
      message: `已保存`,
    })
  }).finally(() => {
  })
}
// 重置设置
const resetSettings = () => {
  queryWebsiteInfo();
}
const editParams = (data: {
  key: string,
  value: string,
  remark: string,
}) => {
  console.log('修改参数', data)
  ElMessageBox.prompt('【注意】请按照参数说明的规则修改参数', '修改参数', {
    confirmButtonText: '修改',
    cancelButtonText: '取消',
    inputValue: data.value
  })
    .then(({value}) => {
      service.request({
        url: "/api/sys/params/sync",
        method: "post",
        params: null,
        data: {
          ...data,
          value: value
        }
      }).then((res) => {
        console.log(res)
        queryParams()
        ElMessage({
          type: 'success',
          message: `参数修改成功`,
        })
      }).finally(() => {
      })
    })
    .catch(() => {
    })
}

</script>

<template>
  <div class="main-box-margin">
    <el-card class="setting-card">
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <el-tabs v-model="activeTab" type="border-card">
        <!-- 网站设置 -->
        <el-tab-pane label="网站设置" name="site">
          <el-form label-width="130px">
            <el-form-item v-for="item in siteSettings" :key="item.id" :label="item.info">
              <el-input v-model="item.settingValue" placeholder="请输入参数值"/>
            </el-form-item>
          </el-form>
          <div class="button-group">
            <el-button type="primary" @click="saveSettings">保存设置</el-button>
            <el-button @click="resetSettings">重置</el-button>
          </div>
        </el-tab-pane>

        <!-- 参数设置 -->
        <el-tab-pane label="参数设置" name="param">
          <el-table :data="paramsList" style="width: 100%;min-height: 300px" stripe>
            <el-table-column label="参数名" prop="key"></el-table-column>
            <el-table-column label="参数值" prop="value"></el-table-column>
            <el-table-column label="说明" prop="remark"></el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button type="primary" icon="edit" size="small" @click="editParams(scope.row)">
                  修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style lang="css" scoped>
.setting-card {
  width: 100%;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.button-group {
  margin-top: 20px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
